/**
 * Created by hejg on 2018/5/15.
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    View,
    Text,
    ActivityIndicator,
    StyleSheet
} from 'react-native';
import Style from './Style';

//opacity:0,
export default class Indicator extends Component {

    render() {
        let container = null, center = null, iconColor = null;
        switch (this.props.styleType) {
            case 1:
                container = styles.container1;
                center = styles.center1;
                iconColor = Style.color.gray;
                break;
            case 2:
                container = styles.container2;
                center = styles.center2;
                iconColor = Style.color.white;
                break;
        }
        iconColor = this.props.color ? this.props.color : iconColor;

        return this.props.isVisible ? (
                <View style={container}>
                    <View style={center}>
                        {
                            this.props.type === 'none' ? null : <ActivityIndicator size="small" color={iconColor}/>
                        }
                        {this.props.message ? (
                                <Text style={{color:iconColor,fontSize:Style.fontSize.small}}>
                                    {this.props.message}
                                </Text>
                            ) : null}
                    </View>
                </View>
            ) : null;
    }
}

Indicator.propTypes = {
    styleType: PropTypes.number.isRequired,//1:占位替换风格(白底),2:表层浮动风格(透明)
    isVisible: PropTypes.bool.isRequired,
    message: PropTypes.string,//用于显示的文本信息
    type: PropTypes.string,//显示的加载图标类型(none,default),none:代表不显示图标
};

Indicator.defaultProps = {
    styleType: 2, //使其默认采用表层浮动风格
};

const styles = StyleSheet.create({
    container1: {
        // flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: Style.color.white,
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        backgroundColor: Style.color.white
    },
    container2: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.2)'
    },
    center1: {},
    center2: {
        backgroundColor: 'rgba(0, 0, 0, 0.5)', padding: 10, borderRadius: 10
    }
});